<template>
  <div class="majority"> <!--与tabbar一级的-->
    <div class="operator">
      <el-input v-model="input" style="width: 240px;height: 34px;margin: 0 20px 0 20px" placeholder="Please input" />
      <el-button type="success" :icon="Search" @click="searchItem(input)">查询</el-button>
      <el-button type="success" :icon="Plus" @click="this.dialogVisible=true;this.flag=1" v-if="false">添加</el-button>
      <el-button type="danger" :icon="Delete">删除</el-button>
    </div>
    <div class="tableList">
      <el-table
          stripe
          border
          ref="multipleTableRef"
          :data="currentTableData"
          style="width: 100%;margin-left: 20px"
          @selection-change="handleSelectionChange"
      >
        <!--          选项改变时触发函数-->
        <el-table-column type="selection" width="55" />
        <el-table-column property="cId" label="id" />
        <el-table-column property="cName" label="姓名" />
        <el-table-column property="cSex" label="性别" />
        <el-table-column property="cTel" label="电话" />
        <el-table-column property="operator" label="操作" >
          <template #default="scope">
            <el-button size="small" @click="handleEdit( scope.row)">
              编辑
            </el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete( scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :small="false"
          :disabled="false"
          :background="false"
          layout="total, prev, pager, next, jumper"
          :total="totalItems"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <el-dialog v-model="dialogVisible" title="新增" width="60%">
    <el-form :model="form">
      <el-form-item label="名称" :label-width="formLabelWidth">
        <el-input v-model="form.cName"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-input v-model="form.cSex"  autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth">
        <el-input v-model="form.cTel"  autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="getData(),this.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="add">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {Search,Plus,Delete} from "@element-plus/icons-vue";
</script>
<script>
import {ref} from "vue";
import request from "@/util/request";
import {ElMessage} from "element-plus";
export default {
  name: "CoachAdmin",
  data(){
    return{
      input:ref(""),
      tableData:[],
      currentTableData:[],
      currentPage:ref(),
      pageSize:ref(10),
      totalItems:ref(0),
      dialogVisible:ref(false),
      form:{
        cName:ref(''),
        cSex:ref(''),
        cTel:ref(''),
      },
      flag:ref(0),
    }
  },
  methods:{
    add(){
      if(this.flag===1)
      {
        request.post('/api/coach/insert',this.form).then(res=>{
          ElMessage.success("添加成功")
          this.getData()
        })
      }else{
        request.post('/api/coach/update',this.form).then(res=>{
          ElMessage.success("修改成功")
          this.getData()
        })
      }
      this.dialogVisible=false
    },
    searchItem(input){
      request.post("/api/coach/getByname?cName="+input).then(res=>{
        this.currentTableData=res.data
        this.input=""
        console.log("找到了")
      })
    },
    getData(){
      request.post("/api/coach/getallData").then(res=>{
        if(res.data!=null){
          this.tableData=res.data
          console.log(res)
          this.currentPage=1
          this.totalItems=this.tableData.length
          this.currentTableData = this.tableData.filter((item, index) => index < this.pageSize)
        }

      })
    },
    handleSelectionChange(val){
      console.log("选择的值为：")
      console.log(val)
    },
    handleEdit(row){
      this.flag=2
      this.form=row
      this.dialogVisible=true
    },
    handleDelete(row){
      request.post("/api/coach/delete?cId="+row.cId).then(res=>{
        this.getData()
        ElMessage.error("成功")
      })
    },
    handleCurrentChange(page){
      this.currentPage.value=page
      const index = this.pageSize * (page - 1)
      const nums = this.pageSize * page
      const tables = []
      for (let i = index; i < nums; i++) {
        if (this.tableData.value[i]) tables.push(this.tableData.value[i])  //看看这里
      }
      this.currentTableData.value = tables
    }
  },
  created() {
    this.getData()
  }
}
</script>

<style scoped>
.majority{
  width: 100%;
  height: 80vh;
}
.operator{
  display: flex;
  width: 100%;
  height: 10vh;
}
.tableList{
  width: 100%;
  height: 60vh;
}
.demo-pagination-block{
  display: flex;
  width: 100%;
  justify-content: center;
}
</style>